<template>
  <!-- 图片要用到 locate_1.png   locate_2.png  wel_footer.png -->
  <div class="Dialog">
    <div class="locate_3">设备真实地理位置</div>
    <div class="zindexModel1" />
    <div class="zindexModel2" />
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.Dialog {
  position: absolute;
  /* left: 1000px;
  top: 300px; */
  width: 160px;
  height: 82px;
}

.locate_3 {
  font-size: 18px;
  position: absolute;
  color: white;
  padding: 0 0 0 10px;
  background-image: url("~@/assets/xd/new/Slice 27.png");
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 100;
}

.zindexModel1 {
  position: absolute;
  bottom: -50px;
  right: -20px;
  z-index: 20;
  width: 200px;
  height: 200px;
background: rgba(150, 180, 254, 0.437);  border-radius: 50%;
}

.zindexModel2 {
  position: absolute;
  bottom: -150px;
  right: -120px;
  z-index: 2;
  width: 400px;
  height: 400px;
background: rgba(31, 161, 255, 0.5);  border-radius: 50%;
}
</style>